<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<link type="text/css" href="/css/cultivateWeb/style/my.css" rel="stylesheet">
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<link rel="stylesheet" href="/css/certificateWeb/workNews/workNews.css">
<body>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<style>
    .myTitle {
        width: 155px;
        height: 55px;
        text-align: center;
        display: inline-block;
        font-size: 22px;
        line-height: 55px;
        border-bottom: 2px #005C34 solid;
        margin-left: 11px;
        color: #005C34;
    }
</style>
<div style="clear: both"></div>
<div style="background-color: #f7f7f7; ">
    <div style="height: 40px">
        <p style="margin: 0px auto auto 380px; line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > 我的课程</p>
    </div>
    <hr style="margin: 0 auto ; width: 1200px"/>
    <section class="sec_1" style="background:#F7F7F7;padding-top: 0">
        <div class="div_1" style="margin-top: 0">
            <ul>
                <li><a href="/cultivate/my">个人资料</a></li>
                <li><a href="/cultivate/myOrder">我的订单</a></li>
                <li><a href="/cultivate/myCourse">我的课程</a></li>
                <li><a href="/cultivate/studyRecord">学习记录</a></li>
                <li><a href="/cultivate/myResume">我的简历</a></li>
                <li><a href="/cultivate/deliverRecord">投递记录</a></li>
                <li><a href="/cultivate/applyRecord">申请记录</a></li>
                <li><a href="/cultivate/myMessage">消息中心</a></li>
                <li class="this"><a href="/cultivate/myCertificates">我的证书</a></li>
                <li><a href="/certificate/mock?grade=2" target="_blank">幼儿照护初级模拟考试</a></li>
                <li><a href="/certificate/mock?grade=1" target="_blank">幼儿照护中级模拟考试</a></li>
                <li><a href="/certificate/mock?grade=0" target="_blank">幼儿照护高级模拟考试</a></li>
            </ul>
        </div>
        <div class="div_2" style="margin-top: 0;border: none">
            <div class="bt50">
                <div class="rmtjkc aa">
                    <div class="xianshi">
                        <div class="qiehuan active">
                            <ul class="clear" id="course">
                            </ul>
                        </div>
                        <div id="page" class="page"></div>
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both"></div>
    </section>
    <!-- 分页 -->
</div>
<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
<script type="text/javascript" src="/js/xlPaging.js"></script>
</body>
<script>
    $(function () {
        selMyCer();
    });

    function selMyCer() {
        ajaxToken("/jzApi/user/selMyCer", 'GET',
            {
                current: 1,
                number: 12
            }, function (res) {
                if (res.pages == 0) {
                    $("#course").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.records;
                    var course = '';
                    list.forEach(function (item, index) {
                        var a = '';
                        if (item.coursesName != null && item.coursesName != '') {
                            a += '<div style="padding: 10px"><h1 style="text-align: left;margin-bottom: 10px">' + item.coursesName + '</h1></div>'
                        }
                        course += '<li style="width: 33.3%;height: 333px;margin: 1% auto">' +
                            '<div style="position: relative">' +
                            '<img class="bg-img" src="' + item.imgUrl + '" alt="图片"></div>' +
                            a +
                            '<img id="img" src="' + item.imgUrl + '" style="display: none">' +
                            '<div style="margin-top: 10px"><a style="float: left;" onclick="look(\'' + item.imgUrl + '\')"  class="uc-ykt-course-card_btn">查看证书</a>' +
                            '<a style="float: right;" href="' + item.imgUrl + '" download class="uc-ykt-course-card_btn">下载</a><div style="clear: both"></div></div>' +
                            '</li>'

                    });
                    course += '<div style="clear: both"></div>';
                    $("#course").html(course);
                    page(1, res.pages);

                    layer.confirm("您已获得专家申请资格，是否前往申请？", {
                        btn: ['前去申请', '暂不申请']
                    }, function (index, layero) {
                        location.href = '/certificate/evaluationStationApplyFor?type=4';
                    }, function (index) {

                    });


                }
            }
        )
    }

    //页面层-图片
    function look(img) {
        var y = document.body.clientHeight / 2;
        var a = '<img style="height: ' + y + 'px" src="' + img + '" />';
        layer.open({
            type: 1,
            title: false,
            area: ['auto'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: a
        });
    }

    function page(num, tolPages) {
        $("#page").paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 10, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 1,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                ajaxToken("/jzApi/user/selMyCer", 'GET',
                    {
                        current: num,
                        number: 12
                    }, function (res) {
                        if (res.pages == 0) {
                            $("#course").html('<div class="noData">暂无数据</div>');
                        } else {
                            var list = res.records;
                            var course = '';
                            list.forEach(function (item, index) {
                                var a = '';
                                if (item.coursesName != null && item.coursesName != '') {
                                    a += '<div style="padding: 10px"><h1 style="text-align: left;margin-bottom: 10px">' + item.coursesName + '</h1></div>'
                                }
                                course += '<li style="width: 33.3%;height: 333px;margin: 1% auto">' +
                                    '<div style="position: relative">' +
                                    '<img class="bg-img" src="' + item.imgUrl + '" alt="图片"></div>' +
                                    a +
                                    '<img id="img" src="' + item.imgUrl + '" style="display: none">' +
                                    '<div style="margin-top: 10px"><a style="float: left;" onclick="look(\'' + item.imgUrl + '\')"  class="uc-ykt-course-card_btn">查看证书</a>' +
                                    '<a style="float: right;" href="' + item.imgUrl + '" download class="uc-ykt-course-card_btn">下载</a><div style="clear: both"></div></div>' +
                                    '</li>'
                            });
                            $("#course").html(course);
                        }
                    }
                )
            }
        });
    }
</script>
</html>